<template>
	<view class="find">
		<view class="hander">
			<text class="choose">精选好物</text>
		</view>
		
		
		
		<view class="content" v-for="item in list" :key="item.value"   >
			<view  class="pic" :class=" [actImg == item.value? 'actImg':' ']"  @tap="icons(item)">
				<image :src=item.path   mode="" class="img"></image>
			</view>	
		</view>
		
		
		<view class="bottom" v-for="item in aritlceList" :key="item.id" @tap="desc(item)">
			
			<image :src="item.coverImg" mode="" class="imgx"></image>
			
			<text class="shou">{{item.author}}</text><br>
			<text class="title">{{item.title}}</text>
			
		</view>
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	import { aritlceList } from "../../util/find/index.js"
	import { list} from "../../util/kind/index.js"
	export default {
		data() {
			return {
				start:0,
				kindId:"",
				actImg:0,
				aritlceList:[],
				goodsList:[],
				list:[
					{
						path:"../../static/icons/chuangyi.png",
						 value:0
					},
					{
						path:"../../static/icons/shipin.png",
						 value:1
					},
					{
						path:"../../static/icons/fengge.png",
						 value:2
					},
					{
						path:"../../static/icons/dengju.png",
						 value:3
					}
				]
			};
		},
		
		methods:{
			
			icons(el){
				this.kindId=el.id;
				this.actImg=el.value;
				
				
				aritlceList({
					kindId:this.kindId
				}).then(res=>{
					console.log(res)
					this.aritlceList=res.data.data.list
				})		
			},
			
			
			desc(item)
			{
				uni.navigateTo({
					url:'./article/article?id='+ encodeURIComponent(JSON.stringify(item))
				})
			}
			
			
			
		},
		
		onLoad(){
			
			// onLoad钩子函数中是异步执行的  所以要把  aritlceList 请求写在list请求的里面
			//因为then后面的函数是异步执行的
			
			list().then(res=>{
				this.goodsList=res.data.data
				
				this.list.forEach((el,index)=>{
					el.id=res.data.data[index].id
				})
				
				aritlceList({
					kindId:this.list[0].id
				}).then(res=>{
					console.log(res)
					this.aritlceList=res.data.data.list
				})		
			})
			
		
			
			
			
			
	  }	
	  
    }
	
	
	
	
</script>

<style lang="scss" scoped>
.find{
	padding-top: var(--status-bar-height);
	width: 100%;
	height: 2000px;
	background-color: #ede7e1;
}

.hander{
	width: 100%;
	height: 60px;
	background-color: #354E44;
}
.choose{
	color: #fff;
	position: absolute;
	top: 25px;
	left: 45%;
}

.content{
	
	margin-top: 20px;
	 float: left;
	 margin-right: 20px;
	 margin-left: 23px;
	
	}
// .hand{
// 	width: 50px;
// 	height: 50px;
// 	background-color: #fff;
// 	border-radius: 25px;
// }
.pic{
	width: 84rpx;
	height: 84rpx;
	 
	 border-radius: 50%;
	 text-align: center;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background-color: #fff;
	 margin-left:5px;
	 margin-top: 7px;
	 
	 .img{
		 width: 38rpx;
		 height: 38rpx;
	 }
	
}
.actImg{
	background-color: #354E44 ;
	width: 50px;
	height: 50px;
	border-radius: 25px; 
	// position: absolute;
	 margin-left: 0px;
	 margin-top: -3px;
	 text-align: center;
	.img{
		width: 50rpx;
		height: 50rpx;
	}
}

.bottom{
	width: 88%;
	height: 300px;
	background-color: #fff;
	margin-top: 100px;
	margin-left: 20px;
	border-radius: 10px;
}

.imgx{
	width: 100%;
	height: 200px;
	background-color:#fff;
	border-radius: 10px;
}
.shou{
	font-size: 18px;
	color: #8c8c8c;
	
}
.title{
	font-size: 20px;
	
}
	
</style>
